<!DOCTYPE html>
<html>
<head>
	<title>Staff Management with binding</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="DataGrid, binding">
	<meta name="author" content="xu.fei@outlook.com">

	<link rel="stylesheet" href="http://libs.baidu.com/bootstrap/2.0.4/css/bootstrap.min.css"/>
	<script type="text/javascript" src="../libs/lodash/lodash.min.js"></script>
	<script type="text/javascript" src="../js/thin.js"></script>
</head>
<body>
<div class="span12" vm-model="StaffViewModel" vm-init="init">
	<div class="header">
		<h3>Staff Management with binding</h3>
	</div>
	<div>
		<div class="row" vm-element="staffGrid"></div>
		<div class="row">
			<div class="header">
				<h4>Detail</h4>
			</div>
			<hr/>
			<form class="form-horizontal span6">
				<div class="control-group">
					<label class="control-label" for="inputIndex">Index</label>

					<div class="controls">
						<input type="text" id="inputIndex" placeholder="Index" vm-value="index" vm-enable="enableForm"/>
					</div>
				</div>
				<div class="control-group">
					<label class="control-label" for="genderSelect">Gender</label>

					<div class="controls">
						<select id="genderSelect" vm-list="genderArr" vm-value="gender" vm-enable="enableForm"></select>
					</div>
				</div>
			</form>
			<form class="form-horizontal span6">
				<div class="control-group">
					<label class="control-label" for="inputName">Name</label>

					<div class="controls">
						<input type="text" id="inputName" placeholder="Name" vm-value="name" vm-enable="enableForm"/>
					</div>
				</div>
				<div class="control-group">
					<label class="control-label" for="inputAge">Age</label>

					<div class="controls">
						<input type="text" id="inputAge" placeholder="age" vm-value="age" vm-enable="enableForm"/>
					</div>
				</div>
			</form>
		</div>
	</div>
	<div class="modal-footer">
		<div vm-invisible="editing">
			<button class="btn btn-primary" vm-click="newClick">New</button>
			<button class="btn btn-primary" vm-click="modifyClick"><i class="icon-edit icon-white"></i>Modify</button>
			<button class="btn btn-primary" vm-click="deleteClick"><i class="icon-remove icon-white"></i>Delete</button>
		</div>
		<div vm-visible="editing">
			<button class="btn btn-primary" vm-click="okClick"><i class="icon-ok icon-white"></i>OK</button>
			<button class="btn btn-primary" vm-click="cancelClick">Cancel</button>
		</div>
	</div>
</div>

<script type="text/javascript">
	thin.require(["controls/datagrid", "role/vm/staffViewModel"], function () {
		thin.fire({type: "ready"});
	});
</script>

</body>
</html>